import { useMenuStore } from '@/stores/menu'
import { watchEffect } from 'vue';

/** 
 * 自定义指令 - 功能权限控制
 * 
 * 
 * 使用示例：v-permission="'admin:list'"
 * 注：value 传入具体的权限名称，必须唯一
 *  */
export const permission = {
    // 在绑定元素的父组件
    // 及他自己的所有子节点都挂载完成后调用
    mounted(el: any, binding: any) {
        const { value } = binding;

        /** 权限渲染 */
        watchEffect(() => {
            const menuStore = useMenuStore();
            let permissionResult = checkPermission(value);
            let isAllow = permissionResult.isAllow;

            // 1、权限信息还没载入，先对元素进行 display 隐藏/显示
            el.style.display = isAllow ? '' : 'none';

            // 2、权限信息加载完成，不能操作的权限按钮，直接移除
            if (menuStore.permissionLoaded && !isAllow) {
                el.parentNode && el.parentNode.removeChild(el);
            }

            // 3、设置元素属性
            el.innerText = permissionResult.title;
        })
    }
}

/** 
 * 检查用户权限 
 * @param {string} permission 权限名称
 * */
const checkPermission = (permission: string): permissionInfo => {
    let result: permissionInfo = {};
    const userPermissions = getUserPermissions();
    if (!userPermissions || userPermissions.length === 0) {
        return result;
    }

    for (let perItem of userPermissions) {
        if (perItem.permissionName === permission) {
            result = {
                title: perItem.title,
                icon: perItem.icon,
                permissionName: perItem.permissionName,
                isAllow: true
            };
            break;
        }
    }

    return result;
}

/** 获取当前登录用户权限 */
const getUserPermissions = (): permissionInfo[] => {
    let result: permissionInfo[] = [];

    const menuStore = useMenuStore();

    const permissionInfo = menuStore.permissionInfo;
    if (!permissionInfo || permissionInfo.length === 0) {
        return result;
    }

    for (let menuItem of permissionInfo) {
        result.push({
            title: menuItem.title,
            icon: menuItem.icon,
            permissionName: menuItem.permission,
            isAllow: false
        });
    }

    return result;
}

/**
 * 权限信息
 */
interface permissionInfo {
    /** 功能标题 */
    title?: string
    /** 图标 */
    icon?: string
    /** 权限名称 */
    permissionName?: string
    /** 是否拥有该权限 */
    isAllow?: boolean
}